<div class="modal-header" modal-draggable>
  <button type="button"
          class="close"
          ng-click="$dismiss()"
          aria-hidden="true"
          aria-label="Close">
    <span aria-hidden="true" class="fa fa-times"></span>
  </button>
  <h3 class="modal-title">{$ ::ctrl.modalTitle $}</h3>
</div>
<!-- begin general node info modal -->
<div class="modal-body">
  <div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
      <li class="required active">
        <a href=""
           data-target="#nodeInfo"
           data-toggle="tab"
           translate>Node Info</a></li>
      <li ng-if="!ctrl.driverProperties"
          class="disabled">
        <a data-target="#driverDetails"
           translate>Driver Details</a></li>
      <li ng-if="ctrl.driverProperties">
        <a href=""
           data-target="#driverDetails"
           data-toggle="tab"
           translate>Driver Details</a></li>
      <li ng-if="ctrl.driverType === 'classic' || !ctrl.driverProperties"
          class="disabled">
        <a data-target="#driverInterfaces"
           translate>Driver Interfaces</a></li>
      <li ng-if="ctrl.driverType === 'dynamic' && ctrl.driverProperties">
          <a href=""
             data-target="#driverInterfaces"
             data-toggle="tab"
             translate>Driver Interfaces</a><li>
    </ul>

    <!--base node form-->
    <form id="baseNodeForm"
          name="baseNodeForm">
      <!--tabbed content-->
      <div class="tab-content">
        <!-- node info tab-->
        <div class="tab-pane active" id="nodeInfo">
          <!--node name-->
          <div class="form-group"
               ng-class="{'has-error': baseNodeForm.name.$invalid &&
                         baseNodeForm.name.$dirty}">
            <label for="name"
                   class="control-label"
                   translate>Node Name</label>
            <div>
              <input type="text"
                     class="form-control"
                     ng-model="ctrl.node.name"
                     id="name"
                     name="name"
                     ng-pattern="ctrl.validHostNameRegex"
                     placeholder="{$ ::'A unique node name. Optional.' | translate $}"/>
            </div>
          </div>
          <!--resource class-->
          <div class="form-group"
               ng-class="{'has-error': baseNodeForm.resource_class.$invalid &&
                         baseNodeForm.resource_class.$dirty}">
            <label for="resource_class"
                   class="control-label"
                   translate>Resource Class</label>
            <div>
              <input type="text maxlength=80"
                     class="form-control"
                     ng-model="ctrl.node.resource_class"
                     id="resource_class"
                     name="resource_class"
                     placeholder="{$ ::'A resource class name for future nova scheduling, in stand-alone usage only. Optional.' | translate $}"/>
            </div>
          </div>
          <!--network interface-->
          <div ng-if="ctrl.driverType === 'classic'" class="form-group">
            <label for="network_interface"
                   class="control-label"
                   translate>
              Network Interface
            </label>
            <span class="help-icon"
                  data-container="body"
                  title=""
                  data-toggle="tooltip"
                  data-original-title="{$ ::'Network interface used for switching between provisioning, tenant, and cleaning networks.' | translate $}">
              <span class="fa fa-question-circle"></span>
            </span>
            <div>
              <div class="btn-group">
                <label class="btn btn-default"
                       ng-repeat="opt in ['noop', 'flat', 'neutron']"
                       ng-model="ctrl.node.network_interface"
                       uib-btn-radio="opt">{$ opt $}</label>
              </div>
            </div>
          </div>
          <!--storage interface-->
          <div ng-if="ctrl.driverType === 'classic'" class="form-group">
            <label for="storage_interface"
                   class="control-label"
                   translate>
              Storage Interface
            </label>
            <span class="help-icon"
                  data-container="body"
                  title=""
                  data-toggle="tooltip"
                  data-original-title="{$ ::'Interface used for attaching and detaching volumes on this node.' | translate $}">
              <span class="fa fa-question-circle"></span>
            </span>
            <div>
              <div class="btn-group">
                <label class="btn btn-default"
                       ng-repeat="opt in ['noop', 'cinder']"
                       ng-model="ctrl.node.storage_interface"
                       uib-btn-radio="opt">{$ opt $}</label>
              </div>
            </div>
          </div>
          <!--node driver-->
          <div class="form-group required">
            <label for="driver"
                   class="control-label"
                   translate>Node Driver</label>
            <span class="hz-icon-required fa fa-asterisk"></span>
            <div>
              <select id="driver"
                      class="form-control"
                      ng-options="driver as driver.name for driver in ctrl.drivers"
                      ng-model="ctrl.selectedDriver"
                      ng-change="ctrl.loadDriver(ctrl.selectedDriver.name)">
                <option value="" disabled selected translate>Select a Driver</option>
              </select>
            </div>
          </div>
          <!--property collections-->
          <div ng-repeat="collection in ctrl.propertyCollections">
            <form
               id="add-{$ collection.id $}-form"
               name="add-{$ collection.id $}-form">
              <div class="form-group">
                <label for="add-{$ collection.id $}-input"
                       class="control-label">
                  {$ collection.title $}</label>
                <div class="input-group input-group-sm">
                  <span class="input-group-addon"
                        style="width:25%;text-align:right">
                    {$ collection.addPrompt $}:</span>
                  <input class="form-control"
                         id="add-{$ collection.id $}-input"
                         type="text"
                         ng-model="ctrl[collection.id]"
                         placeholder="{$ collection.placeholder $}"/>
                  <span class="input-group-btn">
                    <button class="btn btn-primary"
                            type="button"
                            ng-disabled="!ctrl[collection.id] ||
                                         !ctrl.collectionCheckPropertyUnique(collection.id,
                                         ctrl[collection.id]) ||
                                         add-{$ collection.id $}-form.$invalid"
                            ng-click="ctrl.node[collection.id][ctrl[collection.id]] = null;
                                      ctrl[collection.id] = null">
                      <span class="fa fa-plus"> </span>
                    </button>
                  </span>
                </div>
              </div>
            </form>
            <form id="ctrl.{$ collection.formId $}"
                  name="ctrl.{$ collection.formId $}">
              <div class="form-group">
                <div class="input-group input-group-sm"
                     ng-repeat="(propertyName, propertyValue) in ctrl.node[collection.id]">
                  <span class="input-group-addon"
                        style="width:25%;text-align:right">
                    {$ propertyName $}
                  </span>
                  <input class="form-control"
                         type="text"
                         name="{$ propertyName $}"
                         ng-model="ctrl.node[collection.id][propertyName]"
                         ng-required="true"/>
                  <div class="input-group-btn">
                    <a class="btn btn-default"
                       ng-click="ctrl.collectionDeleteProperty(collection.id, propertyName)">
                      <span class="fa fa-minus"> </span>
                    </a>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <!--end node info tab-->

        <!--driver details tab-->
        <div class="tab-pane" id="driverDetails">
          <p class="text-center"
             ng-if="ctrl.loadingDriverProperties">
            <small><em><i class="fa fa-spin fa-refresh"></i></em></small>
          </p>
          <div ng-repeat="propertyGroup in ctrl.driverPropertyGroups"
               ng-class="{'well': propertyGroup.length > 1}">
            <div class="form-group"
               ng-repeat="property in propertyGroup | filter:ctrl.isDriverPropertyActive"
               ng-init="name = property.name;
                        selectOptions = property.getSelectOptions()"
               ng-class="{'has-error': baseNodeForm.{$ name $}.$invalid &&
                         baseNodeForm.{$ name $}.$dirty}">
            <label for="{$ name $}"
                   class="control-label"
                   style="white-space: nowrap">
              {$ name $}
              <span ng-if="property.isRequired()"
                    class="hz-icon-required fa fa-asterisk"></span>
              <span class="help-icon"
                    data-container="body"
                    title=""
                    data-toggle="tooltip"
                    data-original-title="{$ property.getDescription() $}">
                <span class="fa fa-question-circle"></span>
              </span>
            </label>
            <div ng-if="!selectOptions"
                 ng-class="{'input-group': name === 'deploy_kernel' ||
                           name === 'deploy_ramdisk'}">
              <input type="text"
                     class="form-control"
                     id="{$ name $}"
                     name="{$ name $}"
                     ng-model="property.inputValue"
                     ng-pattern="property.getValidValueRegex()"
                     placeholder="{$ property.defaultValue !== undefined ?
                                  property.defaultValue :
                                  property.getDescription() $}"
                     ng-required="property.isRequired()"
                     empty-to-pristine/>
              <div ng-if="name === 'deploy_kernel' ||
                          name === 'deploy_ramdisk'"
                   class="input-group-btn">
                <button type="button"
                        class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown"
                        translate>
                  Choose an Image
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li>
                    <a class="dropdown-item"
                       ng-repeat="imageObj in ctrl.images"
                       href="#"
                       ng-click="property.inputValue = imageObj.id">{$ imageObj.name + ' [' + imageObj.id + ']' $}</a>
                  </li>
                </ul>
              </div>
            </div>
            <div ng-if="selectOptions" class="">
              <select ng-if="selectOptions.length > 4"
                      id="{$ name $}"
                      class="form-control"
                      ng-options="opt for opt in selectOptions"
                      ng-model="property.inputValue"
                      ng-required="property.isRequired()">
                <option ng-if="property.defaultValue === undefined"
                        value=""
                        disabled
                        selected>
                  {$ property.getDescription() $}</option>
              </select>
              <div ng-if="selectOptions.length <= 4"
                   class="btn-group">
                <label class="btn btn-default"
                       ng-repeat="opt in selectOptions"
                       ng-model="property.inputValue"
                       uib-btn-radio="opt">{$ opt $}</label>
              </div>
            </div>
          </div>
          </div>
        </div>
        <!--end driver details tab-->

        <!-- start of driver interfaces tab -->
        <div class="tab-pane", id="driverInterfaces">
          <p class="text-center"
             ng-if="ctrl.loadingDriverProperties">
            <small><em><i class="fa fa-spin fa-refresh"></i></em></small>
          </p>
          <form id="DriverInterfacesForm", name="DriverInterfacesForm">
            <div ng-repeat="field in ctrl.driverInterfaceFields"
                 class="form-group">
              <form-field field="field" form="DriverInterfacesForm"></form-field>
            </div>
          </form>
        </div>
        </div>
      <!--end tabbed content-->
    </form>
    <!--end base node form-->
  </div>
</div>
<!--modal footer-->
<div class="modal-footer ng-scope">
  <button class="btn btn-default"
          ng-click="ctrl.cancel()">
    <span class="fa fa-close"></span>
    <span class="ng-scope" translate>Cancel</span>
  </button>

  <button type="submit"
          ng-disabled="!ctrl.readyToSubmit()"
          ng-click="ctrl.submit()"
          class="btn btn-primary">
    {$ ::ctrl.submitButtonTitle $}
  </button>
</div>
